<template>
  <van-nav-bar v-bind:title="exams.name" left-text="返回" left-arrow @click-left="onClickLeft">
    <template #right>
      <van-count-down :time="time">
      </van-count-down>
    </template></van-nav-bar>
  <van-empty v-if="questionListLength === 0" description="暂无数据" />
  <div id="question">
    <div v-for="(item, index) in tiMuArr" :key="index">
      <div>{{ item.name }}</div>
      <div v-for="(v, k) in item.questionItems" :key="k">

        <!-- 内容区 -->
        <div style="height: 100%;display: flex;flex-direction: column;margin: .45rem;line-height: 1.85rem;">
          <div>
            <span>第{{ k + 1 }}题&nbsp;&nbsp;</span>
            <!-- {{ v.questionType }} -->
            <van-tag plain type="primary">
              {{ v.questionType == "1" ? '单选题' : v.questionType == "2" ? '多选题' : v.questionType == "3" ? "判断题" : '' }}
            </van-tag>
          </div>
          <!-- 试题内容 -->
          <div style="background-color: #e8e8e8">{{ v.title }}</div>
        </div>
        <!-- 单选题 -->
        <van-radio-group style="padding: 0 14px;" v-if="v.questionType !== '2'" v-model="v.correctArray"
          @change="changeOptHandle(0, $event)">
          <van-radio style="margin-bottom: 8px;" v-for="(a, q) in v.items" :key="q" :name="a.prefix">{{ a.prefix }}.{{
            a.content }}
          </van-radio>
        </van-radio-group>
        <!-- 多选题 -->
        <van-checkbox-group style="padding: 0 14px;" v-model="correctArrays" v-if="v.questionType == '2'"
          @change="changeOptHandle(1, $event)">
          <van-checkbox style="margin-bottom: 8px;" v-for="(a, q) in v.items" :key="q" :name="a.prefix">{{ a.prefix
          }}.{{ a.content }}</van-checkbox>
        </van-checkbox-group>

        <!-- 解析 -->
        <!-- <van-action-sheet v-model:show="showAnalysis" title="解析">
        <span style="font-size: 18px">{{ exams.analysis }}</span>
      </van-action-sheet> -->
        <!-- 操作区 -->
        <!-- <div style="height: 50px">
        <div class="handle">
          <van-button block type="primary" :disabled="active===0" @click="preQuestion()">上一题</van-button>
          <van-button block type="success" @click="showAnswerSheet=!showAnswerSheet">答题卡</van-button>
          <van-button block type="success" @click="showAnalysis=!showAnalysis">解析</van-button>
          <van-button block color="linear-gradient(to right, #ff6034, #ee0a24)" @click="dataSubmit">交卷</van-button>
          <van-button block type="primary" :disabled="active === questionListLength-1" @click="nextQuestion()">下一题</van-button>
        </div>
      </div> -->

        <!-- 考试完毕 -->
        <!-- <van-dialog v-model:show="finished" :title="finishedData.examName" @confirm="finishHandle">
        <div style="display: flex;flex-direction: column">
          <span>正确数量：{{finishedData.correctNum}}</span>
          <span>错误数量：{{finishedData.errorNum}}</span>
          <span>正确率：{{finishedData.correctRate}}</span>
          <van-tag type="primary">
            {{finishedData.examType ==="SIMULATION" ? '模拟考试' : question.examType ==="ASSEMBLE" ? '组卷练习' : question.examType ==="EVERYDAY" ? "每日一练" : "章节测试"}}
          </van-tag>
          <span>结束时间：{{finishedData.createDate}}</span>
        </div>
      </van-dialog> -->

      </div>
    </div>

  </div>
</template>
<script setup lang='ts'>
import { ref, onUnmounted, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { Exam } from '../api/api';
import $bus from "../config/eventBus";
import { showConfirmDialog } from 'vant';
//  刷新
let loadingTag = ref<boolean>(true);
// 获取传递的 通知的 id 值
const router = useRouter();
// 可以使用 route 来获取 参数值
const route = useRoute();
const index = ref(0)
const exams = ref<any>([])
const tiMuArr = ref<any>([])
const tiMu = ref<any>([])
const time = ref(0)
const times = ref();
const correctArrays = ref<any>([])
const active = ref(0);
const questionListLength = ref(0)
onMounted(async () => {
  const ret3 = await Exam(route.query.params as string);
  console.log("2", ret3)
  if (ret3.data.code === 0) {
    exams.value = ret3.data.data
    time.value = ret3.data.data.suggestTime * 60 * 1000
    tiMuArr.value.push(...ret3.data.data.titleItems)
    // tiMuArr.map(item => {
    //   tiMu.push(item.name)
    // })
    questionListLength.value = ret3.data.data.titleItems.length
    console.log('22', questionListLength.value, time.value);
    console.log(44, ret3.data.data.titleItems)
    let tiArrs = ret3.data.data.titleItems
    console.log(999, tiArrs)
    // 多选题获取选项
    tiArrs.forEach((item: any) => {
      console.log(9999, item.questionItems)
      let tiArr = item.questionItems
      tiArr.forEach((c: any) => {
        console.log(7777, c.items)
        correctArrays.value = c.items
      })
    })
    console.log("377", tiMuArr.value);

  } else {
    return false
  }

});
const changeOptHandle = (type: any, prefix: any) => {
  if (type === 1) {
    tiMuArr.value[active.value].correctArray = prefix.join(",")
  }
}
// 提交确认
// showConfirmDialog({

//   message:
//     '确定提交试卷吗？',
// })
//   .then(() => {
//     // on confirm
//   })
//   .catch(() => {
//     // on cancel
//   });
// const preQuestion=()=>{
//       active.value--;
//       state.question = state.questionList[active.value]
//     }

//     const nextQuestion=()=>{
//       active.value++;
//       state.question = state.questionList[active.value]
//     }

//     const toQuestion = (index)=>{
//       active.value = index-1;
//       state.question = state.questionList[active.value]
//       state.showAnswerSheet = false
//     }

//  返回上一页
const onClickLeft = () => history.back();
//登陆页不要tabBar
onMounted(() => {
  $bus.emit("tabBarHide", false);
})

//页面离开记得销毁
onUnmounted(() => {
  $bus.emit("tabBarHide", true);
})
</script>
    
<style scoped lang='scss'>
.box {
  margin: 15px;

}
</style>